import React, { useState, memo, useCallback } from 'react'

function PageA (props) {
  console.log('a')
  return (
    <>
    <button onClick = { props.onClick }>按钮A - { props.children }</button>
    </>
  ) 
}

function PageB (props) {
  console.log('b')
  return (
    <>
    <button onClick = { props.onClick }>按钮B - { props.name }</button>
    </>
  ) 
}
const PageBB = memo(PageB)
function App() {
  const [a, setA] = useState(1)
  const setAFn = () => {
    setA(a + 1)
  }

  const [b, setB] = useState(2)
  const setBFn = useCallback(() => { // useCallback 记忆函数
    setB(b + 2)
  }, [b]) // 空数组代表无论什么情况下该函数都不会发生改变
  // 如果b不发生改变，不回执行

  return (
    <div>
      <PageA onClick = { setAFn }>{a}</PageA>
      <hr />
      <PageBB onClick = { setBFn } name={ b }></PageBB>
    </div>
  )
}

export default App
